<template>
  <div class="app-main-container">
    <!-- <div class="app-main-title">人流分析图表统计</div> -->
    <!-- <div class="doumee-filter">
      <el-form inline @submit.native.prevent>
        <el-form-item label="场馆:">
          <el-select v-model="filters.venueId" placeholder="选择场馆">
            <el-option
              v-for="item in venueLists"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间:">
          <el-date-picker
            v-model="filters.time"
            value-format="yyyy-MM-dd"
            type="daterange"
            class="w400"
            range-separator="至"
            start-placeholder="默认当天"
            end-placeholder="默认当天"
            :clearable="false"
            @blur="dateIndex = 0"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick type="primary" @click="getDataList">查询</el-button>
        </el-form-item>
      </el-form>
    </div> -->

    <div id="echarts" />

  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    filters: {
      type: Object,
      default: () => {}
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getChartData() {
      var chartDom = document.getElementById('echarts')
      var myChart = echarts.init(chartDom)
      var option
      const dataList = this.list
      option = {
        xAxis: {
          type: 'category',
          data: dataList.map((item) => { return item.time })
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '进',
            type: 'line',
            stack: 'Total',
            data: dataList.map((item) => { return item.totlEntries })
          },
          {
            name: '出',
            type: 'line',
            stack: 'Total',
            data: dataList.map((item) => { return item.totlOut })
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
#echarts {
  width: 100%;
  height: 500px;
}
</style>
